;(function($){
    "use strict";

    // console.log($);

    // 绑定到jq的全局：没有操作DOM的功能
    // $.banner = function(item, ops){
    //     console.log(item, ops)
    // }
    // $.extend($, {
    //     banner:function(item, ops){
    //         console.log(item, ops)
    //     }
    // })
    // $.extend({
    //     banner:function(item, ops){
    //         console.log(item, ops)
    //     }
    // })
    
    // 绑定到jq的DOM：操作了DOM的功能
    // $.fn是jq的DOM对象的抽象，也可以认为是jq的DOM对象的原型
    // $.fn.banner = function(item, ops){
    //     console.log(item, ops)
    // }
    // $.extend($.fn, {
    //     banner:function(item, ops){
    //         console.log(item, ops)
    //     }
    // })
    // $.fn.extend({
    //     banner:function(item, ops){
    //         console.log(item, ops)
    //     }
    // })

    $.fn.banner = function(item, ops={}){
        const that = this;

        // console.log(this);
        // console.log(item, ops)
        // ops = ops || {};
        if(!item){
            // 主动抛出报错
            throw "关键参数没有传入";
            // console.error("关键参数没有传入")
            // return;
        }

        let {
            btns = true,
            pageItem = true,
            autoPlay = true,
            moveTime = 300,
            delayTime = 3000,
            index = 0
        } = ops;

        // 检测参数是否处理成功
        // console.log(btns);
        // console.log(pageItem);
        // console.log(autoPlay);
        // console.log(moveTime);
        // console.log(delayTime);
        // console.log(index);

        // 1. 渲染轮播图结构
        let str = "";
        item.forEach(val=>{
            str += `<img src="${val.src}" alt="${val.alt}" title="${val.title}">`;
        });
        $("<div class='imgbox'>").html(str).appendTo(this)
        .children("img").css({
            position:"absolute",
            left:"100%",
            top:0
        }).eq(index).css({
            left:0
        })

        let prev;

        // 2. 左右按钮
        if(btns){
            // 创建左右按钮的页面结构，并绑定事件
            $("<div class='btns'>").append($("<input type='button'id='left' value=''>")).append($("<input type='button'id='right' value=''>")).appendTo(this).children("input").eq(0).click(function(){
                // 计算索引
                if(index === 0){
                    index = item.length-1;
                    prev = 0;
                }else{
                    index--
                    prev = index + 1;
                }
                // 运动图片，传入方向
                btnMove(1)
            }).end().eq(1).click(rightClick)
        }

        function rightClick(){
            // 计算索引
            if(index === item.length-1){
                index = 0
                prev = item.length-1
            }else{
                index++;
                prev = index-1;
            }
            // 运动图片，传入方向
            btnMove(-1)
        }

        function btnMove(d){
            // 先设置要走的元素的初始位置，再使用运动走到指定位置
            // 再设置要进来的元素的初始位置，再使用运动进来到指定位置
            that.children(".imgbox").children("img").eq(prev).css({
                left: 0
            }).stop().animate({
                left: that.children(".imgbox").children("img").eq(0).width() * d
            }, moveTime).end().eq(index).css({
                left: -that.children(".imgbox").children("img").eq(0).width() * d
            }).stop().animate({
                left: 0
            }, moveTime)

            if(!pageItem) return;
            // 修改分页器的当前项样式
            that.children(".list").children("span").eq(index).addClass("active").siblings().removeClass("active");
        }

        // 3. 分页器
        if(pageItem){
            // 创建分页器结构
            let str = "";
            for(var i=0;i<item.length;i++){
                str += `<span>${i+1}</span>`;
            }
            // 添加到指定容器，并添加分页器事件
            $("<div class='list'>").html(str).appendTo(this).children("span").eq(index).addClass("active").end().click(function(){
                // console.log($(this).index());
                // console.log(index)
                if($(this).index() > index){
                    // console.log("向左运动")
                    listMove($(this).index(), 1)
                }
                if($(this).index() < index){
                    // console.log("向右运动")
                    listMove($(this).index(), -1)
                }
                // 点击的索引，就是当前索引，就是下一次要走的索引
                index = $(this).index();
            })

            function listMove(now, d){
                // 先设置要走的元素的初始位置，再使用运动走到指定位置
                // 再设置要进来的元素的初始位置，再使用运动进来到指定位置
                that.children(".imgbox").children("img").eq(index).css({
                    left: 0
                }).stop().animate({
                    left: -that.children(".imgbox").children("img").eq(0).width() * d
                }, moveTime).end().eq(now).css({
                    left: that.children(".imgbox").children("img").eq(0).width() * d
                }).stop().animate({
                    left: 0
                }, moveTime)
                // 修改分页器的当前项样式
                that.children(".list").children("span").eq(now).addClass("active").siblings().removeClass("active");
            }
        }

        // 4. 自动播放
        if(autoPlay){
            let t;
            clearInterval(t);
            // 开启计时器，自动执行
            t = setInterval(() => {
                rightClick()
            }, delayTime);
            // 鼠标进入整个大容器
            this.hover(function(){
                // 停止自动播放
                clearInterval(t);
            },function(){
                // 鼠标离开，继续
                clearInterval(t);
                t = setInterval(() => {
                    rightClick()
                }, delayTime);
            })
        }
        
    }

})(jQuery);